<template>
  <div>
    <div class="bottom_content">
      <div class="content">
        <div class="bottom_company_content">
          <div>
            <img src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/logo-square.png" class="company_logo">
          </div>
          <span class="bottom_company_name">莆田餐巴</span>
          <span class="bottom_company_tittle">新零售全渠道解决方案提供商</span>
        </div>
        <div class="bottom_center_content">
          <div class="bottom_center">
            <div class="bottom_center_item">
              <span class="bottom_center_item_text">产品与价格</span>
              <span class="bottom_center_item_text">莆田餐巴</span>
              <span class="bottom_center_item_text">芸团购</span>
              <span class="bottom_center_item_text">芸直播</span>
              <span class="bottom_center_item_text">芸市场</span>
              <span class="bottom_center_item_text">版本与价格</span>
            </div>
            <div class="bottom_center_item">
              <span class="bottom_center_item_text">关于我们</span>
              <span class="bottom_center_item_text">公司简介</span>
              <span class="bottom_center_item_text">企业文化</span>
              <span class="bottom_center_item_text">管理团队</span>
              <span class="bottom_center_item_text">发展历程</span>
              <span class="bottom_center_item_text">资深与荣誉</span>
              <span class="bottom_center_item_text">联系我们</span>

            </div>
          </div>

          <div class="bottom_center">
            <div class="bottom_center_item">
              <span class="bottom_center_item_text">媒体中心</span>
              <span class="bottom_center_item_text">公司新闻</span>
              <span class="bottom_center_item_text">行业新闻</span>
              <span class="bottom_center_item_text">市场活动</span>
            </div>
            <div class="bottom_center_item">
              <span class="bottom_center_item_text">服务支持</span>
              <span class="bottom_center_item_text">合作伙伴</span>
              <span class="bottom_center_item_text">商家学院</span>
            </div>
          </div>

        </div>
        <div class="bottom_right_content">
          <div class="call_content">
            <span class="company_phont">客服热线：</span>
            <span  class="company_phont">400-800-8888</span>
          </div>
          <div  class="bottom_extension_box">
            <div class="extension_item">
              <div class="bottom_right_extension">

              </div>
              <span class="extension_title">关注莆田餐巴公众号</span>
            </div>
            <div class="extension_item">
              <div class="bottom_right_extension">

              </div>
              <span class="extension_title">扫码进入商家学院</span>
            </div>

          </div>
          <span class="callMe_title" >客服支持：kfzc@rzico.sina.com</span>
          <span class="callMe_title" >业务合作：ywhz@rzico.sina.com</span>
        </div>
      </div>

      <div class="company_info_content">
        <span class="callMe_title" >地址：厦门市思明区龙山中路16号启达时尚大厦218室</span>
        <span  class="callMe_title">增值电信业务许可证：闽B2-8888888    ©版权所有：厦门睿商科技有限公司    闽ICP备888888888-2号    闽ICP证888888号</span>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'bottom'
  }
</script>

<style scoped>
  @media (max-width: 750px){
    .bottom_content{
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-right: 10px;
      padding-left: 10px;
      justify-content: center;
      align-items: center;
      background-color: #161e30;
      padding-top: 30px;
      padding-bottom: 12px;

    }
    .bottom_center{
      width: 100%;
      justify-content: space-between;
      display: flex;
    }
    .bottom_company_content{

      display: none;
    }
    .extension_item{
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 10px;
    }
    .company_logo{
      height: 30px;
      width: 30px;
    }
    .bottom_company_name{
      margin-top: 5px;
      font-size: 16px;
      font-family: STLiti;
      font-weight: 400;
      color: #FCFCFC;
    }
    .call_content{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bottom_company_tittle{
      font-size: 7px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
    }
    .bottom_center_content{
      display: flex;
      /*margin-left: 45px;*/
      flex-wrap: wrap;
      /*flex-direction: column;*/
      justify-content: space-evenly;
      /*align-items: center;*/
    }
    .bottom_center_item{
      margin-right: 5px;
    }
    .bottom_center_item_text{
      color: white;
      display: block;
      font-size: 13px;
      margin-bottom: 10px
    }
    .company_phont{
      color: white;
      font-size: 15px;
      font-weight: 600;
      margin-top: 5px
    }
    .bottom_right_extension{
      height: 36px;
      background-color: rgb(248,248,248);
      width: 36px;
    }
    .extension_title{
      color: white;
      font-size: 8px;
      margin-top: 10px;
    }
    .bottom_extension_box{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
    .callMe_title{
      text-align: center;
      font-size: 11px;
      color: white;
      display: block;
      margin-top: 8px;
    }
  }
  @media (min-width: 750px){
    .content{
      display: flex;
    }
    .bottom_center{
      width: 100%;
      justify-content: space-between;
      display: flex;
    }
    .company_phont{
      color: white;
      font-size: 24px;
      font-weight: 600;
      margin-top: 5px
    }
    .bottom_content{
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-right: 20px;
      padding-left: 20px;
      justify-content: center;
      align-items: center;
      background-color: #161e30;
      padding-top: 63px;
      padding-bottom: 25px;

    }
    .bottom_company_content{
      display: flex;
      flex-direction: column;
      align-items: center;

    }
    .company_logo{
      height: 65px;
      width: 65px;
    }
    .bottom_company_name{
      margin-top: 10px;
      font-size: 32px;
      font-family: STLiti;
      font-weight: 400;
      color: #FCFCFC;
    }
    .bottom_company_tittle{
      font-size: 7px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
    }
    .bottom_center_content{
      display: flex;
      margin-left: 90px;
      /*flex-direction: column;*/
      justify-content: space-between;
      /*align-items: center;*/
    }
    .bottom_center_item{
      margin-right: 30px;
    }
    .bottom_center_item_text{
      color: white;
      display: block;
      width: 70px;
      font-size: 13px;
      margin-bottom: 10px
    }
    .bottom_right_content{
      margin-left: 40px;
      display: flex;
      width: 170px;
      flex-direction: column;
      justify-content: space-between;
    }
    .bottom_right_extension{
      height: 72px;
      background-color: rgb(248,248,248);
      width: 72px;
    }
    .bottom_extension_box{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
    .extension_title{
      color: white;
      font-size: 8px;
    }
    .callMe_title{
      font-size: 11px;
      color: white;
      display: block;
      margin-top: 8px;
    }
    .company_info_content{
      margin-top: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }

</style>
